<template>
  <div>
    <el-dialog
      title="柜机信息"
      :visible.sync="show"
      width="1051px"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-transfer
        v-model="dataList"
        :data="cabinetList"
        :titles="['机构柜机', '门店柜机（' + info.name + '）']"
        filterable
        filter-placeholder="请输入柜机名称"
        :props="{
          key: 'id',
          label: 'name',
        }"
      >
        <span slot-scope="{ option }">
          {{ option.name }}
        </span>
      </el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listCabinet } from "@/api/mc/cabinet";
import { listStoreCabinet, updateStoreCabinet } from "@/api/mc/store";

export default {
  name: "StoreCabinet",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    // 门店信息
    info: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  watch: {
    async value(val) {
      if (val) {
        this.reset();
        this.queryParams.institutionId = this.info.institutionId;
        await this.getList();
        this.getStoreUserList();
      } else {
        this.reset();
      }
    },
  },
  data() {
    return {
      cabinetList: [], // 全部柜机列表
      dataList: [], // 已选柜机列表
      queryParams: {
        pageNum: 1,
        pageSize: 10000,
        institutionId: null,
        status: -1,
      },
    };
  },
  methods: {
    /** 查询柜机列表 */
    getList() {
      return new Promise((resolve, reject) => {
        listCabinet(this.queryParams).then((res) => {
          this.cabinetList = res.rows;
          resolve(res.rows);
        });
      });
    },
    // 查询已选门店柜机列表
    getStoreUserList() {
      listStoreCabinet(this.info.id).then((res) => {
        this.dataList = res.data.map((i) => i.id);
        this.cabinetList = this.cabinetList.concat(res.data);
      });
    },
    // 取消按钮
    cancel() {
      this.show = false;
      this.$emit("cancel");
    },
    // 表单重置
    reset() {
      this.dataList = [];
    },
    // 提交表单
    submitForm() {
      updateStoreCabinet({
        storeId: this.info.id,
        cabinetId: this.dataList.join(","),
      }).then((res) => {
        this.$modal.msgSuccess("保存成功");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer-panel {
  width: 410px;
}
</style>
